<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<title>Document</title>
	</head>
	<body>
		<div id="root"></div>

		<script type="text/babel">
			class Demo extends React.Component {
			  state = { isHot: false }
			  myRef1=React.createRef()
			  myRef2=React.createRef()
			  
			  showData = (e) => {
				// console.log(this.myRef1,this.myRef2);
				// alert(this.myRef1.current.value)
				// alert(this.myRef2.current.value)
				console.log(e);
			  }
			  
			  changeWeather=(e)=>{
				  const { isHot } = this.state
				  this.setState({
					  isHot:!isHot
				  })
			  }
			  render() {
				const { isHot } = this.state
				return (
				  <div>
					<h2>今天天气很{isHot ? '炎热' : '寒冷'}</h2>
					<input onBlur={this.showData} type="text" /><br/><br/>
					<input ref={this.myRef2} type="text" /><br/><br/>
					<button onClick={this.changeWeather}>点我切换天气</button>
					
				  </div>
				)
			  }
			}

    ReactDOM.render(<Demo />, document.getElementById('root'))
  </script>
	</body>
</html>
